<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>小红书搜索数据</title>
  <style>
    body {
      font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #ff2442;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .search-container {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    #search-input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
      padding-right: 100px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    th {
      background-color: #f8f8f8;
      font-weight: bold;
    }
    tr:hover {
      background-color: #f9f9f9;
    }
    .actions {
      text-align: center;
      min-width: 350px;
    }
    .btn {
      background-color: #ff2442;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 5px;
      font-size: 14px;
    }
    .btn:hover {
      background-color: #e01f3d;
    }
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .pagination button {
      margin: 0 5px;
      padding: 5px 10px;
      cursor: pointer;
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .pagination button.active {
      background-color: #ff2442;
      color: white;
      border-color: #ff2442;
    }
    
  </style>
</head>
<body>
  <div class="container">
    <div class="top">

    <h1>小红书搜索数据</h1>
      <div class="actions">
        <button id="export-json" class="btn">导出 JSON</button>
        <button id="export-csv" class="btn">导出 CSV</button>
        <button id="clear-data" class="btn">清空数据</button>
      </div>
    </div>
    
    <div class="search-container">
      <input type="text" id="search-input" placeholder="搜索关键词...">
    </div>
    
    <div id="data-table-container">
      <table id="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>查询关键词</th>
            <th>标题</th>
            <th>用户</th>
            <th>图片</th>
            <th>时间</th>
            <th>结果数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="table-body">
          <!-- Data will be loaded here -->
        </tbody>
      </table>
    </div>
    
    <div class="pagination" id="pagination">
      <!-- Pagination will be generated here -->
    </div>
    

  </div>

  <script src="data-view.js"></script>
</body>
</html> 